import React,{Component} from 'react'
import Course from '../Course'
import Pages from '../Pages'
import User from './User'
import {Link,browserHistory} from 'react-router';
import * as pub from '../../config/public';
import * as fetch from '../../config/fetch'
import {Spin,message,Button} from 'antd'
import Layer from '../Layer';
class MyCollect extends Component {
	constructor(props) {
		super(props);
		this.state = {
			CourseList:[],
			jumpPage: 1,
			totalPage: 0,
			loading : false,
			essayTitle:this.props.essayTitle?this.props.essayTitle:'',
			essayATitle:this.props.essayATitle?this.props.essayATitle:''
		}
	}
	courseCollection(){
       pub.loading(this,true);
		fetch.courseCollection({pageno:this.state.jumpPage,courseName:this.state.essayTitle}).then((data) => {
			if(data.result==='RC100'){
				this.setState({
				CourseList: data.myCourseList,
				totalPage:data.totalPage
			  });
			}else{
				message.error(data.errMsg, 3);
			}
			pub.loading(this,false);
		},(res)=>{
			pub.loading(this,false);
			pub.reject(res);
		})
	}
	courseClick(){
		this.courseCollection();
	}
	componentWillUpdate(nextState) {
        if (nextState.essayTitle !== this.state.essayTitle) {
            this.setState({
				essayTitle:nextState.essayTitle
			},function(){
				this.courseCollection();
			})
        }
		 if (nextState.essayATitle !== this.state.essayATitle) {
            this.setState({
				essayATitle:nextState.essayATitle
			},function(){
				this.courseCollection();
			})
        }
    }
	shouldComponentUpdate(nextProps, nextState) {
        return pub.shouldComponentUpdate(nextProps, nextState, this.props, this.state);
    }
    componentWillMount() {
		this.courseCollection();
	}
	jump(page) {
		this.setState({
			jumpPage:page
		},function(){
			this.courseCollection();
		})
	}
	render(){
		return(
			<div>
				<Spin spinning={this.state.loading} tip="加载列表中...">
					<ul className="common-course clearFix">
					{this.state.CourseList.map((item,index)=>{
						return(
								<li key={index}>
								<Course id={index} item={item} courseClick={this.courseClick.bind(this)}/>
								</li>
							)
					})}
					</ul>
				</Spin>
				<Pages totalPage={this.state.totalPage} jump={this.jump.bind(this)}/>	
			</div>	
			)
	}
}
class Article extends Component {
	constructor(props) {
		super(props);
		this.state = {
			EssayColList:[],
			jumpPage: 1,
			totalPage: 0,
			visibleDH:false,
			loading : false,
			essayTitle:this.props.essayTitle?this.props.essayTitle:'',
			essayATitle:this.props.essayATitle?this.props.essayATitle:'',
			loadBtning:false
		}
	}
	hideModelDH(){
			this.setState({
				visibleDH: false,
			});
	}
	ok(id){
		pub.loadBtning(this,true);
		fetch.cashEssay({essayId:id}).then((data)=>{
			if(data.result === 'RC100'){
				message.success(data.errMsg, 3)
				pub.jumpHistory.push("/ArticleDetail/" +id+"/collect")
			}else{
				message.error(data.errMsg, 3);
			}
			pub.loadBtning(this,false);
		}, (res) => {
			pub.reject(res);
			pub.loadBtning(this,false);
		})
	}
	clickArticle(item) {
		if (item.goodEssay === '1') {
			if (item.userEssayOperation.isBuy === 1) {
				pub.jumpHistory.push("/ArticleDetail/" + item.essayId+"/collect")
			} else {
				this.setState({
					visibleDH: true,
					essayId: item.essayId,
					studyIntegral: item.exchangeIntegral
				})
			}
		} else {
			pub.jumpHistory.push("/ArticleDetail/" + item.essayId+"/collect")
		}
	}
    moreColessay() {
		pub.loading(this,true);
		fetch.moreColessay({pageno:this.state.jumpPage}).then((data) => {
			if(data.result==='RC100'){
               this.setState({
				EssayColList: data.myEssayColList?data.myEssayColList:[],
				totalPage:data.totalPage?data.totalPage:''
		    	});
			}else{
                message.error(data.errMsg, 3);
			}
			pub.loading(this,false);
		},(res)=>{
			pub.loading(this,false);
			pub.reject(res);
		})
	}
	componentWillMount() {
		this.moreColessay();
	}
	jump(page) {
		this.setState({
			jumpPage:page
		},function(){
			this.moreColessay();
		})
	}
	operate(essayId,type){
        fetch.operateArticle(essayId, type).then((data) => {
			if (data.result === 'RC100') {
				this.moreColessay();
				message.success(data.msg, 3);
			}else{
                message.error(data.errMsg, 3);
			}
		})
	}
	render(){
		return(
			<div style={{minHeight:'611px'}}>
				<Spin spinning={this.state.loading} tip="加载列表中...">
                {this.state.EssayColList.map((item,index)=>{
                    return(
						<div key={index} className="panel-120 essayPanel bg-FFFFFF bon'p'mx-shadow" style={{height:'231px',width: '949px'}}>
							<div className="author-msg" style={{height:'50px'}}>
								<img  src={pub.getFile(item.headPath)}  alt="head" onError={(e) => pub.headImageError(e)}/>
								<p><span>{item.userRealName?item.userRealName:''}</span><span>{item.branchOffice?item.branchOffice:''}</span></p>
								<p className="time">{pub.formatTimestamp(item.createTime)}</p>
								{
									item.goodEssay==='1'||item.goodEssay===1?<div className="jing"></div>:null
								}
							</div>
							<Link onClick={() => this.clickArticle(item)} className="article-list" style={{display:'block'}}>
								<p className="title">{item.essayTitle?item.essayTitle:''}</p>
								<p className="content shorthand">{item.essayNote?pub.subString(item.essayNote,100):'没有文字'}</p>
								{
									item.essayPhotos.length > 0 ?
											<img src={pub.getFile(item.essayPhotos[0].essayPhotoPath)} alt="head" />
										:
										null
								}
							</Link>
							<div className="collect-like">
								<span onClick={()=>this.operate(item.essayId,'1')} style={{opacity:item.userEssayOperation.isCollection === 1 ? 1 : 0.4}}><i className="icon-heart"></i>{item.sumCollection?item.sumCollection:''}</span>
								<span onClick={()=>this.operate(item.essayId,'0')} style={{opacity:item.userEssayOperation.isLike === 1 ? 1 : 0.4}}><i className="icon-thumbs-up"></i>{item.sumLike?item.sumLike:''}</span>
							</div>
						</div>
                    )
                })}
				</Spin>
				<Layer
					title="设置兑换积分"
					show={this.state.visibleDH}
					hide={(e) => { this.setState({ visibleDH: false,loadBtning:false }) }}
					width="400px"
					height="270px"
				>
					<div className="row">
						<div className="pop-box-1" style={{ textAlign: 'left' }}>
							<p style={{ textAlign: 'center' }}>您需要{this.state.studyIntegral}积分兑换该文章</p>
						</div>
						<div className="pop-btn">
							<Button loading={this.state.loadBtning} onClick={() => this.hideModelDH()} className="btn btn-blue" style={{ borderRadius: '5px', marginRight: '50px' }}>取消</Button>
							<Button loading={this.state.loadBtning} className="btn btn-blue" style={{ borderRadius: '5px' }} onClick={() => this.ok(this.state.essayId)}>确认
								</Button>
						</div>
					</div>
				</Layer>
				<Pages totalPage={this.state.totalPage} jump={this.jump.bind(this)}/>
			</div>
			)
}
}
class Collector extends Component {
	constructor(props) {
		super(props);
		this.state={
			activeIndex : this.props.params.code===undefined?true:false,
			poinEssayText:'',
			submitText:''
		}
	}
    pSTextChange(event){
		this.setState({poinEssayText: event.target.value});
	}
	submitText(){
		this.setState({submitText:this.state.poinEssayText})
	}
	render(){
		return(
			<div>
			   <div className="left-layout">
			   		{/*<div className="common-title">
						<span>我的收藏</span>
						<a className="floatR">更多&gt;</a>
					</div>
					<MyCollect />*/}
					<div className="filter clearFix">
						<ul className="filter-ul nav clearFix">
							<li><Link to="/PersonalCenter/Collector" className={this.state.activeIndex?"active":""} onClick={()=>{this.setState({activeIndex:true})}}>课程收藏</Link></li>
							<li><a className={!this.state.activeIndex?"active":""} onClick={()=>{this.setState({activeIndex:false})}}>{(JSON.parse(localStorage.getItem('user')).channelId)==='4'?'星行圈收藏':'蜂行圈收藏'}</a></li>
						</ul>
						{this.state.activeIndex?
                           <div className="filter-search floatR">
								<input type="text" placeholder="搜索" value={this.state.poinShoptText} onChange={this.pSTextChange.bind(this)}/>
								<a className="btn search-btn" onClick={this.submitText.bind(this)}><i className="icon-search"></i></a>
						    </div>:null
						}
					</div>
					<div className="row tab">
					{this.state.activeIndex?
                        <MyCollect essayTitle={this.state.poinEssayText} essayATitle={this.state.submitText}/>:
                        <Article />
					}
					</div>
					<div className="line"></div>
					<Pages />

			   </div>

			   	<div className="right-layout-top">
				    <User />
				</div>
			</div>
			)
	}
}
export default Collector;